<template>
  <div class="container">
    <div class="operation">
      <span>房间管理</span>
      <el-button type="primary" @click="openDialog(null)">添加房间类型</el-button>
    </div>
    <div class="rooms">

      <div class="room">
        <span class="room-type">房间类型</span>
        <span class="room-num">房间数量/间</span>
        <div class="room-fac">房间设施</div>
        <span class="room-price">房间价格/&yen;</span>
        <div class="room-operation">操作</div>
      </div>
      <div class="room" v-for="item in rooms" :key="item.roomCode">
        <span class="room-type">{{ item.roomType }}</span>
        <span class="room-num">{{ item.roomNum }}</span>
        <div class="room-fac">
          <div :style="!item.roomFacWifi ? 'text-decoration: line-through; color: darkgrey' : ''">wifi</div>
          <div :style="!item.roomFacBre ? 'text-decoration: line-through; color: darkgrey' : ''">早餐</div>
          <div>{{ item.roomFacOcc }}人</div>
          <div>{{ item.roomFacFloor }}楼</div>
          <div>{{ item.roomFacSpa }}m&sup2;</div>
          <div>{{ item.roomFacBed }}m</div>
        </div>
        <span class="room-price">{{ item.roomExp.toLocaleString('zh-CN', {style: 'currency', currency: 'CNY'}) }}</span>
        <div class="room-operation">
          <el-button type="warning" class="room-delete" @click="openDialog(item)">修改</el-button>
          <el-button v-if="!item.disable" type="danger" class="room-delete" @click="updateRoomDisable(item.roomCode, true)">关闭房间</el-button>
          <el-button v-else type="info" class="room-delete" @click="updateRoomDisable(item.roomCode, false)">开启房间</el-button>
        </div>
      </div>
    </div>
    <el-dialog :width="dialog.width" :title="dialog.title" :visible.sync="dialog.visible" :destroy-on-close="true">
      <el-form :model="dialog.entity" status-ico :label-width="dialog.item.label_width" class="demo-ruleForm">
        <el-input v-if="dialog.title === '修改'" disabled v-model="dialog.entity.roomCode" show-overflow-tooltip :title="dialog.entity.roomCode">
          <template slot="prepend">订单号</template>
        </el-input>
        <el-input v-if="dialog.title === '添加'" v-model="dialog.entity.roomType" show-overflow-tooltip>
          <template slot="prepend">房间类型</template>
        </el-input>
        <el-input v-model="dialog.entity.roomNum" show-overflow-tooltip>
          <template slot="prepend">房间数量/间</template>
        </el-input>
        <div class="update-facs">
          <div class="update-fac">
            <el-switch
                style="display: block"
                v-model="dialog.entity.roomFacWifi"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="wifi">
            </el-switch>
          </div>
          <div class="update-fac">
            <el-switch
                style="display: block"
                v-model="dialog.entity.roomFacBre"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="早餐">
            </el-switch>
          </div>
        </div>
        <el-input v-model="dialog.entity.roomFacSpa" show-overflow-tooltip>
          <template slot="prepend">房间大小/m&sup2;</template>
        </el-input>
        <el-input v-model="dialog.entity.roomFacFloor" show-overflow-tooltip>
          <template slot="prepend">房间楼层/楼</template>
        </el-input>
        <el-input v-model="dialog.entity.roomFacBed" show-overflow-tooltip>
          <template slot="prepend">房间床大小/m</template>
        </el-input>
        <el-input v-model="dialog.entity.roomFacOcc" show-overflow-tooltip>
          <template slot="prepend">房间可入住人数/人</template>
        </el-input>
        <el-input v-model="dialog.entity.roomExp" show-overflow-tooltip>
          <template slot="prepend">房间价格/&yen;</template>
        </el-input>
        <div>
          <el-button v-if="dialog.title === '修改'" type="danger" plain @click="updateRoom">修改</el-button>
          <el-button v-if="dialog.title === '添加'" type="danger" plain @click="addRoom">添加</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {AdminRoomAdd, AdminRoomDisable, AdminRooms, AdminRoomUpdate} from "@/api";
import Store from "@/store";

export default {
  name: "Room",
  data(){
    return{
      rooms: [],
      dialog: {
        title: '修改',
        width: '32%',
        item: {
          label_width: "80px"
        },
        visible: false,
        entity: {},
        entityDefault: {
          disable :false,
          roomDesc: "暂无",
          roomExp: '',
          roomFacBed: '',
          roomFacBre: true,
          roomFacFloor: '',
          roomFacOcc: '',
          roomFacSpa: '',
          roomFacWifi: true,
          roomNum: '',
          roomType: ''
        }
      }
    }
  },
  methods:{
    addRoom(){
      AdminRoomAdd(this.dialog.entity).then(res => {
        AdminRooms().then(res => {
          this.rooms = res
        })
        this.$notify({
          title: "添加成功",
          type: 'success'
        })
        this.dialog.visible = false
        console.log(res)
      })
    },
    updateRoomDisable(roomCode, disable){
      AdminRoomDisable(roomCode, disable).then(res => {
        AdminRooms().then(res => {
          this.rooms = res
        })
        this.$notify({
          title: "修改成功",
          type: 'success'
        })
        this.dialog.visible = false
        console.log(res)
      })
    },
    updateRoom(){
      AdminRoomUpdate(this.dialog.entity).then(res => {
        AdminRooms().then(res => {
          this.rooms = res
        })
        this.$notify({
          title: "修改成功",
          type: 'success'
        })
        this.dialog.visible = false
      })
    },
    openDialog(entity){
      if (entity === null){
        this.dialog.title = "添加"
        this.dialog.entity = JSON.parse(JSON.stringify(this.dialog.entityDefault))
        console.log(this.dialog.entity)
        console.log(this.dialog.entityDefault)
      }else {
        this.dialog.title = "修改"
        this.dialog.entity = JSON.parse(JSON.stringify(entity))
      }
      this.dialog.visible = true
    }
  },
  created() {
    AdminRooms().then(res => {
      this.rooms = res
      console.log(res)
    })
  }
}
</script>

<style scoped lang="less">
.container{
  background: #e8e6e6;
  border-radius: 8px;
  margin: 16px 128px;
  padding: 16px;
  min-width: 560px;
  /deep/.el-dialog{
    min-width: 480px;
    width: 480px;
    .el-dialog__body{
      .el-input{
       margin: 8px 0;
      }
    }
  }
  .update-facs{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .update-fac{
      min-width: 120px;
      margin: 8px 8px;
      .el-switch{
        margin: 4px 0;
      }
    }

  }
  .operation{
    span{
      font-weight: 600;
      color: darkgrey;
    }
    display: flex;
    justify-content: space-between;
    margin-right: 80px;
    align-items: center;
  }
  .rooms{;
    margin-top: 16px;
    .room{
      margin: 8px 0;
      padding: 16px 16px;
      display: flex;
      flex-direction: row;
      border: 1px solid #c7c1c1;
      border-radius: 4px;
      align-items: center;
      .room-type{
        font-weight: 600;
        width: 10%;
      }
      .room-num{
        width: 20%;
      }
      .room-fac{
        width: 30%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
      }
      .room-price{
        width: 15%;
        flex-grow: 1;
        color: red;
      }
      .room-operation{
        width: 15%;
        flex-grow: 1;
        justify-content: space-evenly;
        display: flex;
        span{

        }
        .room-delete{
          border: 1px ;
        }
        .room-update{

        }
        .room-details{

        }

      }
    }
  }
}

</style>